<template>
    <view class="order-price">
        <view class="price-items">
            <view class="price-item">
                <text class="label">商品</text>
                <text class="value">￥{{ data.productPrice.toFixed(2) }}</text>
            </view>
            <view class="price-item" v-if="data.postPrice > 0">
                <view class="label"
                    >运费<view @click="postPriceDesc" class="yunfei"
                        ><iconsfont customIcons="icon-banben1" color="#999" size="28"></iconsfont></view
                ></view>
                <text class="value">￥{{ data.postPrice || 0 }}</text>
            </view>
        </view>
        <view class="pay-price pay-price1">
            <text>订单支付:</text>
            <text v-if="data.productPrice">￥{{ (data.productPrice + data.postPrice || 0).toFixed(2) }}</text>
        </view>
        <uni-popup ref="popTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">运费明细</view>
                <view class="yunfei-main">
                    <view v-for="(item, index) in postDesc" v-if="item.Explain"
                        >{{ index + 1 }}、{{ item.Explain }}</view
                    >
                    <!-- <view v-for="item in data.postDesc">{{item.PostageTemplate.StartLimit}}{{getUnit(item.PostageTemplate.CountWay)}}{{item.PostageTemplate.StartPrice}}元起每{{item.PostageTemplate.ContinueLimit}}{{getUnit(item.PostageTemplate.CountWay)}}加{{item.PostageTemplate.ContinuePrice}}元</view> -->
                </view>
                <view class="pop-action">
                    <view @click="remarkClose">取消</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    watch: {
        data(e) {
            this.$forceUpdate()
        },
    },
    methods: {
        getUnit(num) {
            switch (num) {
                case 0:
                    return "件"
                case 1:
                    return "kg"
                case 2:
                    return "m³"
            }
        },
        remarkClose() {
            this.$refs.popTip.close()
        },
        postPriceDesc() {
            this.$refs.popTip.open()
        },
    },
}
</script>

<style lang="scss">
.order-price {
    border-radius: 16rpx;
    background: $color-white;
    margin-bottom: 20rpx;

    .price-items {
        // border-bottom: solid 1rpx $uni-bg-color-grey;

        .price-item {
            padding: 12rpx 0;
            display: flex;
            flex-direction: row;

            .label {
                display: flex;
                flex: 1;
                font-size: 28rpx;
            }
            .value {
                font-size: 28rpx;
                font-weight: bold;
            }
        }
    }
}
.pay-price1 {
    padding-bottom: 0;
    padding-right: 0;
    font-size: 32rpx;
    color: $color-gray-1;
    text {
        font-size: 32rpx;
        color: $color-gray-1;
        font-weight: bold;
    }
}
.orange {
    color: $color-orange-1;
}
.yunfei {
    color: $color-gray-3;
    padding-left: 24rpx;
}
.pop-return-title {
    padding-bottom: 12rpx;
}
.pop-action {
    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
    margin: 0 -24rpx -24rpx -24rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    view {
        width: 50%;
        text-align: center;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 34rpx;
        color: $app-color-main;
    }
}
.yunfei-main {
    padding: 24rpx 0;
    color: $color-gray-2;
    line-height: 1.5;
    font-size: 28rpx;
    view {
        padding: 10rpx 0;
    }
}
</style>
